<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字投影</title>
    <style type="text/css">
        ul{
            background-color: #665757;
            width: 300px;
            color: white;
            font-size: 30px;
            list-style-type: none;
            padding: 2px 0;
        }
        li{
            height: 50px;
            line-height: 50px;
            border: 5px solid #ccc;
            margin: 5px;
            text-align: center;
        }
        li:nth-child(1){
            text-shadow: 1px 0px 2px gray, 2px 0px 2px gray, 3px 0px 2px black;
        }
        li:nth-child(2){
            text-shadow: 1px -1px 3px gray, 2px -2px 3px gray, 3px -3px 3px black;
        }
        li:nth-child(3){
            text-shadow: 0px -1px 2px gray, 0px -2px 2px gray, 0px -3px 2px black;
        }
        li:nth-child(4){
            text-shadow: -1px -1px 2px gray, -2px -2px 2px gray, -3px -3px 2px black;
        }
        li:nth-child(5) {
            text-shadow: -1px 0px 1px gray, -2px 0px 1px gray, -3px 0px 1px black;
        }

        li:nth-child(6) {
            text-shadow: -1px 1px 1px gray, -2px 2px 1px gray, -3px 3px 1px black;
        }

        li:nth-child(7) {
            text-shadow: 0px 1px 1px gray, 0px 2px 1px gray, 0px 3px 1px black;
        }

        li:nth-child(8) {
            text-shadow: 1px 1px 1px gray, 2px 2px 1px gray, 3px 3px 1px black;
        }

        li:nth-child(9) {
            text-shadow: 1px 0px 1px gray, 2px 0px 1px gray, 3px 0px 1px black;
        }
    </style>
</head>
<body>
<ul>
    <li>W3cplus (0 deg)</li>
    <li>W3cplus (45 deg)</li>
    <li>W3cplus (90 deg)</li>
    <li>W3cplus (135 deg)</li>
    <li>W3cplus (180 deg)</li>
    <li>W3cplus (225 deg)</li>
    <li>W3cplus (270 deg)</li>
    <li>W3cplus (315 deg)</li>
    <li>W3cplus (360 deg)</li>
</ul>
</body>
</html>